<template>
  <div
    :id="chartId"
    :style="{ width: '95%', height: '300px', margin: 'auto' }"
  ></div>
</template>

<script>
import * as echarts from 'echarts'

export default {
  name: 'Echarts',
  props: ['chartId', 'option'],
  data() {
    return {
      optionWatch: this.option
    }
  },
  watch: {
    optionWatch: {
      deep: true,
      handler() {
        this.drawLine()
      }
    }
  },
  mounted() {
    this.drawLine()
  },
  methods: {
    drawLine() {
      let myChart = echarts.init(document.getElementById(this.chartId))
      myChart.setOption(this.option)
    }
  }
}
</script>

<style></style>
